<template>
  <div class="farm-container">
    <nav-bar style="background-color: #0689f4; color: #fff">
      <div slot="center">选择点检装置</div>
    </nav-bar>
    <div class="farm content-top">
      <van-cell-group title="点检区域">
        <van-cell title="区域" :value="fieldValue" />
      </van-cell-group>
      <van-cell-group title="点检装置">
        <div class="farm" v-for="(item, index) in checkItems" :key="index">
          <van-cell :title="item.NAME" is-link @click="goTocheck" />
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import NavBar from "../../../components/NavBar.vue";
import {
  getDeviceName,
  getDeviceCheckItemList,
  getCheckItemName,
} from "../../../api/check";

export default {
  name: "checkDevice",
  components: {
    NavBar,
  },
  props: {},
  data() {
    return {
      show: false,
      fieldValue: "",
      deviceId: '',
      checkItems: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    const data = localStorage.getItem("deviceId");
    if (data === "" || null) {
      this.deviceId = JSON.parse(data);
      this.initCheckItem(this.deviceId);
    } else {
      const arr = this.$route.params.info.split(":");
      this.deviceId = arr[1];
      // this.deviceId = '245a24b7-6a21-4785-bdd5-c53f2928b556';
      // this.deviceId = '013ec440-8920-4b7d-8de6-18c451135bf8';
      this.initCheckItem(this.deviceId);
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$store.commit("hideLoading");
    
    localStorage.setItem("deviceId", JSON.stringify(this.deviceId));
    
    next();
  },
  mounted() {},
  methods: {
    initCheckItem(deviceId) {
      console.log(deviceId);
      //获取设备的名字
      getDeviceName(deviceId)
        .then((res) => {
          if(res.status === 200){
            this.fieldValue = res.data[0].DEVICENAME;
            this.$emit('deviceName', this.fieldValue)
            this.getDeviceItemList(deviceId);
          }else{
            this.$toast('数据错误');
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getDeviceItemList(deviceId) {
      this.$store.commit("showLoading");
      //获取设备对应的点检设备
      let itemIds = await getDeviceCheckItemList(deviceId);
      getCheckItemName(itemIds.data).then((res) => {
        console.log(res);
        if(res.status === 200){
          if(res.data.length === 0){
            this.$store.commit("hideLoading");
            this.$toast("该设备未设置点检项目");
            return;
          }
          this.checkItems = res.data;
          this.$store.commit("hideLoading");
        }else{
          this.$toast("数据错误")
        }
      }).catch(err => {
        this.$store.commit("hideLoading");
         this.$toast("服务器错误")
      });
    },
    goTocheck() {
      this.$router.push("/device/device-qr");
    },
  },
};
</script>

<style scoped lang="less">
.scan {
  height: 100%;
  #bcid {
    width: 100%;
    height: 300px;
    text-align: center;
    color: #fff;
    background: #ccc;
  }
}
.title {
  padding: 15px 10px;
  font-size: 16px;
  color: rgba(69, 90, 100, 0.6);
}
</style>